<template>
  <el-container v-loading="loading">
    <div class="box">
      <h3>{{activeheader}}</h3>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="医生名称" prop="name">
            <el-input style="width:200px;" v-model="ruleForm.name" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="所在地区" prop="province">
            <user-address
          ref="addDocAddress"
          @countryChange="countryChange"
          :defaultValue="defaultAddress"
          seletStyle="width:200px"
        />
        </el-form-item>
        <el-form-item label="所在医院" prop="hospitalId">
            <el-select style="width:200px;" filterable v-model="ruleForm.hospitalId" placeholder="请选择" :disabled="state">
              <el-option v-for="item in hosName" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <span class="hosTip">{{hosTip}}</span>
        </el-form-item>
        <el-form-item label="所在科室" prop="dept">
            <el-input style="width:200px;" class="input-width" v-model="ruleForm.dept" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="标准科室" prop="dept1">
            <hos-offices @deptChange="deptChange" ref="addDocOffices" :defaultValue="defaultOffices" seletStyle="width:200px"/>
        </el-form-item>
        <el-form-item label="医生职称" prop="level">
            <el-select style="width:200px;" v-model="ruleForm.level" placeholder="请选择">
                <el-option
                  v-for="item in doctorTitleList"
                  :key="item.dKey"
                  :label="item.dValue"
                  :value="item.dKey"
                ></el-option>
              </el-select>
        </el-form-item> 
        <el-form-item label="医生电话" prop="phone">
            <el-input style="width:200px;" class="input-width" v-model="ruleForm.phone" placeholder="请输入内容"></el-input>
        </el-form-item> 
        <el-form-item label="医生头像">
            <div class="avatar-uploader" v-if="!ruleForm.headIcon">
              <div tabindex="0" class="el-upload el-upload--text">
                <label for="upPhoto" class="el-icon-plus avatar-uploader-icon"></label>
                <input
                  @change="fileChange"
                  type="file"
                  name="file"
                  class="el-upload__input"
                  id="upPhoto"
                >
              </div>
            </div>
            <img v-if="ruleForm.headIcon" @click="imgLook(ruleForm.headIcon+'!small')" :src="ruleForm.headIcon+'!small'" class="avatar">
            <span v-if="ruleForm.headIcon" class="photoDel" @click="delPhoto">删除</span>
        </el-form-item> 
         <el-form-item label="身份证号" prop="paper">
            <el-input style="width:400px;" class="input-width" v-model="ruleForm.paper" placeholder="请输入内容"></el-input>
        </el-form-item> 
        <el-form-item label="身份证号正面">
            <div class="avatar-uploader" v-if="!paperPics2">
              <div tabindex="0" class="el-upload el-upload--text">
                <label for="upPhoto" class="el-icon-plus avatar-uploader-icon"></label>
                <input
                  @change="fileChange2"
                  type="file"
                  name="file"
                  class="el-upload__input"
                  id="upPhoto"
                >
              </div>
            </div>
            <img v-if="paperPics2" @click="imgLook(paperPics2+'!small')" :src="paperPics2+'!small'" class="avatar">
            <span v-if="paperPics2" class="photoDel" @click="delPhoto2">删除</span>
        </el-form-item> 
        <el-form-item label="身份证号反面">
            <div class="avatar-uploader" v-if="!paperPics3">
              <div tabindex="0" class="el-upload el-upload--text">
                <label for="upPhoto" class="el-icon-plus avatar-uploader-icon"></label>
                <input
                  @change="fileChange3"
                  type="file"
                  name="file"
                  class="el-upload__input"
                  id="upPhoto"
                >
              </div>
            </div>
            <img v-if="paperPics3" @click="imgLook(paperPics3+'!small')" :src="paperPics3+'!small'" class="avatar">
            <span v-if="paperPics3" class="photoDel" @click="delPhoto3">删除</span>
        </el-form-item> 
        <el-form-item label="执业医师证">
            <div class="avatar-uploader" v-if="!ruleForm.doctorPic">
              <div tabindex="0" class="el-upload el-upload--text">
                <label for="upPhoto" class="el-icon-plus avatar-uploader-icon"></label>
                <input
                  @change="fileChange4"
                  type="file"
                  name="file"
                  class="el-upload__input"
                  id="upPhoto"
                >
              </div>
            </div>
            <img v-if="ruleForm.doctorPic" @click="imgLook(ruleForm.doctorPic+'!small')" :src="ruleForm.doctorPic+'!small'" class="avatar">
            <span v-if="ruleForm.doctorPic" class="photoDel" @click="delPhoto4">删除</span>
        </el-form-item> 
        <el-form-item label="开户行" prop="bank">
            <el-input style="width:200px;" class="input-width" v-model="ruleForm.bank" placeholder="请输入内容"></el-input>
        </el-form-item> 
        <el-form-item label="银行账号" prop="bankCardNum">
            <el-input style="width:400px;" class="input-width" v-model="ruleForm.bankCardNum" placeholder="请输入内容"></el-input>
        </el-form-item> 
        <el-form-item>
            <el-checkbox v-model="ruleForm.youplusDoctor" label= true >优加医生</el-checkbox>
            <el-checkbox v-model="ruleForm.register" label= true>注册</el-checkbox>
            <el-checkbox v-model="ruleForm.authentication" label= true>认证</el-checkbox>
            <el-checkbox v-model="ruleForm.choose" label= true>优选</el-checkbox>
        </el-form-item> 


        <el-form-item label="医生简介" prop="info">
            <el-input type="textarea" :rows="2" size="medium" placeholder="请输入内容" v-model="ruleForm.info"></el-input>
        </el-form-item> 
        <el-form-item label="医生擅长" prop="skill">
            <el-input type="textarea" :rows="2" size="medium" placeholder="请输入内容" v-model="ruleForm.skill"></el-input>
        </el-form-item> 
         <el-form-item label="备注" prop="remark">
           <el-input type="textarea" :rows="2" size="medium" placeholder="请输入内容" v-model="ruleForm.remark"></el-input>
        </el-form-item> 
         <el-form-item>
           <el-button type="primary" @click="submit">提交</el-button>
           <el-button @click="cancle">取消</el-button>
        </el-form-item> 
      </el-form>  
      <el-dialog custom-class="bigDig" :visible.sync="imgDiv" :show-close="false">
         <img :src="imgUrl">
     </el-dialog>

    </div>
  </el-container>
</template>

<script>
import { doctorTitleList } from "data/listBody";
import { FileChange } from "utils/formData";
import check from "utils/check";
import UserAddress from "components/address";
import HosOffices from "components/hosOffices";
import queryString from "querystring";

let headers = ["新增医生", "修改医生信息"];
let hosTips = ["请先选择地区", "该地区没有对应医院信息，请先新建医院"];
let requireArray = []; //必传字段

export default {
  name: "addDoc",
  data() {
    return {
      imgDiv: false,
      imgUrl: "",
      ruleForm:{
        name: "",
        dept: "",
        hospitalId: "",
        level: "",
        headIcon: "",
        phone: "",
        info: "",
        skill: "",
        remark: "",
        province:"",
        city:"",
        country:"",
        dept1:"",
        dept2:"",
        youplusDoctor:"",
        paper:"",
        paperPics:"",
        doctorPic:"",
        bank:"",
        bankCardNum:"",
        register:"",
      authentication:"",
      choose:""
      },
      paperPics2:'',
      paperPics3:'',
      rules: {
          name: [
            { required: true, message: '请输入医生名称', trigger: 'blur' }
          ],
          hospitalId: [
            { required: true, message: '请选择所在医院', trigger: 'change' }
          ],
          level: [
            { required: true, message: '请选择医生职称', trigger: 'change' }
          ],
          dept1: [
            { required: true, message: '请选择标准科室', trigger: 'change' }
          ],
          province: [
            { required: true, message: '请选择所在地区', trigger: 'change' }
          ],
          phone: [
            { required: true, message: '请输入医生电话', trigger: 'blur' }
          ],
        },
      loading: false,
      id: "",
      hosTip: hosTips[0],
      state: true, //医院是否可选
      defaultAddress: null, //默认地址
      defaultOffices: null, //默认科室
      activeheader: headers[0],
      check: check.methods.check,
      checkTip: check.tips.checkTip,
      doctorTitleList,
      hosName: []
    };
  },
  components: {
    UserAddress,
    HosOffices
  },
  mounted() {
    this.editInit();
  },
  methods: {
     imgLook(url) {
      this.imgDiv = true;
      this.imgUrl = url;
    },
    fileChange(e) {
      this.loading = true;
      FileChange(e, res => {
        this.loading = false;
        this.ruleForm.headIcon = res.url;
      });
    },
    fileChange2(e) {
      this.loading = true;
      FileChange(e, res => {
        this.loading = false;
        this.paperPics2 = res.url;
      });
    },
    fileChange3(e) {
      this.loading = true;
      FileChange(e, res => {
        this.loading = false;
        this.paperPics3 = res.url;
      });
    },
    fileChange4(e) {
      this.loading = true;
      FileChange(e, res => {
        this.loading = false;
        this.ruleForm.doctorPic = res.url;
      });
    },
    delPhoto() {
      this.ruleForm.headIcon = "";
    },
    delPhoto2() {
      this.paperPics2 = "";
    },
    delPhoto3() {
      this.paperPics3 = "";
    },
    delPhoto4() {
      this.ruleForm.doctorPic = "";
    },
    editInit() {
      let { type, id } = this.$route.query;
      this.api
        .get(`/hospital`)
        .then(res => {
          this.hosName = res.data.list;
          if (this.hosName.length < 1) {
            this.state = true;
            return (this.hosTip = hosTips[1]);
          }
          this.state = false;
          this.hosTip = "";
        })
        .catch(err => {
          console.log(err);
          this.$message(err.message);
        });
      if (type == "edit") this.activeheader = headers[1];
      if (!id) return;
      this.loading = true;
      this.api
        .get(`/doctor/${id}`)
        .then(res => {
          //查询产品详情
          //this.dataInit(res.data);
          this.ruleForm=res.data;
          // 医生职称处理
          let docArr = doctorTitleList.filter(item => {
            return item.dValue == this.ruleForm.level;
          });
          if (docArr.length > 0) {
            this.ruleForm.level = docArr[0].dKey;
          }
          this.hosTip = "";
          this.defaultAddress = {
            province: this.ruleForm.province,
          city: this.ruleForm.city,
          country: this.ruleForm.country
          };
          this.defaultOffices = {
            dept1:this.ruleForm.dept1,
            dept2:this.ruleForm.dept2
          };
          if(this.ruleForm.paperPics){
             this.paperPics2=this.ruleForm.paperPics.split(',')[0];
             this.paperPics3=this.ruleForm.paperPics.split(',')[1]; 
          }
          setTimeout(() => {
            this.loading = false;
          }, 20);
        })
        .catch(err => {
          console.log(err);
          this.loading = false;
          this.$message(err.message);
        });
    },
    handleAvatarSuccess(res, file) {
      this.ruleForm.headIcon = URL.createObjectURL(file.raw);
    },
    countryChange(params) {
      let addressParams = this.$refs.addDocAddress.getData();
      this.ruleForm.province = addressParams.province;
      this.ruleForm.city = addressParams.city;
      this.ruleForm.country = addressParams.country;
        let param = queryString.stringify(params);
        this.api.get(`/hospital?${param}`).then((res)=>{
          this.hosName = res.data.list;
          if(this.hosName.length < 1){
            this.state = true;
            return this.hosTip = hosTips[1];
          }
          this.state = false;
          this.hosTip = '';
        }).catch((err) => {
          console.log(err)
          this.$message(err.message)
        })
    },
    deptChange(){
      let deptParams = this.$refs.addDocOffices.getData();
      this.ruleForm.dept1=deptParams.dept1;
      this.ruleForm.dept2=deptParams.dept2;
    },
    submit() {
      this.ruleForm.paperPics=this.paperPics2+','+this.paperPics3;
      let addressParams = this.$refs.addDocAddress.getData();
      let deptParams = this.$refs.addDocOffices.getData();
      this.ruleForm.province=addressParams.province;
      this.ruleForm.city=addressParams.city;
      this.ruleForm.country=addressParams.country;
      this.ruleForm.dept1=deptParams.dept1;
      this.ruleForm.dept2=deptParams.dept2;
      this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
             this.addUser(this.ruleForm)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    editUser(param) {
      //修改用户
      param.id = this.ruleForm.id;
      this.api
        .put("/doctor", param, "form")
        .then(res => {
          this.$router.go(-1);
        })
        .catch(err => {
          console.log(err);
          this.$message(err.data.message);
        });
    },
    addUser(param) {
      //添加用户
      if (this.$route.query.type == "edit") return this.editUser(param);
      this.api
        .post("/doctor", param, "form")
        .then(res => {
          this.$router.go(-1);
        })
        .catch(err => {
          console.log(err);
          this.$message(err.data.message);
        });
    },
    cancle() {
      this.$router.go(-1);
    }
  }
};
</script>
 
<style lang="less" scoped>

.photoDel {
  margin-left: 20px;
  cursor: pointer;
}
.hosTip {
  font-size: 12px;
  color: red;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>
 